<script setup>
import { ref } from 'vue'
import 'animate.css'

const hero = ref('姜子牙')

const heroSlogan = {
  姜子牙: '不刷新世界观怎么成长。',
  老夫子: '教学生，顺便拯救世界。',
  孙尚香: '大小姐驾到！统统闪开！',
  廉颇: '伤痕，是岁月，是成长，是力量。'
}

const changeName = (e) => {
  hero.value = e.target.textContent
}
</script>

<template>
  <button @click="changeName">姜子牙</button>
  <button @click="changeName">老夫子</button>
  <button @click="changeName">孙尚香</button>
  <button @click="changeName">廉颇</button>

  <!--  mode="out-in" -->
  <Transition class="animate__animated" enter-active-class="animate__fadeInLeft" leave-active-class="animate__fadeOutRight">
    <h1 :key="hero">{{ heroSlogan[hero] }}</h1>
  </Transition>
</template>

<style scoped>
h1 {
  font-family: 阿里巴巴普惠体;
  font-size: 20px;
  position: absolute;
}

:global(body) {
  overflow-x: hidden;
}
</style>
